<template>
  <div class="box-item">
    <div class="box-title">安防管理</div>
    <div class="box-body">
      <div class="body-top">
        <div class="box">
          <div class="box-info">
            <div class="light">28个</div>
            <div class="info-text" style="left: 22px;">告警数量</div>
          </div>
          <div class="box-info">
            <div class="light">23个</div>
            <div class="info-text">已处理数量</div>
          </div>
          <div class="box-info">
            <div class="light">5个</div>
            <div class="info-text">未处理数量</div>
          </div>
        </div>
      </div>
      <div class="body-bottom">
        <div class="box-bottom-title">安防告警数量变化趋势</div>
        <Echart id="leftCenter" v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="126px"
          width="280px" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';

export default {
  name: 'DJtopleft',
  data() {
    return {
      options: {},
      optionData: [
        {
          name: '消防',
          value: 29,
          itemStyle: {
            color: '#D13DF2',
          },
        },
        {
          name: '安防',
          value: 33,
          itemStyle: {
            color: '#6A43F3',
          },
        },
        {
          name: '充电桩',
          value: 21,
          itemStyle: {
            color: '#6CCEE6',
          },
        },
        {
          name: '道闸',
          value: 14,
          itemStyle: {
            color: '#284DF3',
          },
        },
      ],
      countUserNumData: {
        axisData: ['10月', '11月', '12月', '1月', '2月'],
        seriesData0: [19, 32, 68, 49, 52],
        seriesData1: [39, 42, 58, 91, 82],
      },
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() { },
  methods: {
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init(this.countUserNumData);
      });
    },
    init(currentData) {
      // let axisData = ["2021年", "2022年", "2023年", "2024年"];
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData0],
        [...currentData.seriesData1],
      ];

      const options = {
        // backgroundColor: "#0F224C", //背景色
        grid: {
          top: '15%',
          left: '2%',
          right: '8%',
          bottom: '4%',
          containLabel: true,
        },
        legend: {
          show: false,
          // x: "center",
          // y: "25",
          top: '1%',
          left: '4%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['票数(票)', '运费(亿)'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            // max: 800,
            // min: 0,//
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 1,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            // splitLine: {
            //   show: false,
            // },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [],
      };
      const series = [
        {
          name: '票数(票)',
          type: 'line',
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: true,
          // showSymbol: false,
          symbol: 'circle',
          // showSymbol: true,
          // symbol: 'circle',
          data: seriesData[0],
          areaStyle: {
            color: colorsB[1],
          },
          itemStyle: {
            normal: {
              color: '#287CE8',
            },
          },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          label: {
            show: false,
            position: 'top',
            formatter: (par) => {
              return par.value;
            },
            textStyle: { fontSize: 11, color: '#FFF' },
          },
          markPoint: {
            symbol: 'circle',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#FFF',
              formatter: (par) => {
                return par.value + '升';
              },
            },
          },
        },
        {
          name: '运费(亿)',
          type: 'bar',
          barWidth: 25,
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: seriesData[1],
          itemStyle: {
            normal: {
              // color: "#38FFBA",
              color: 'rgba(40, 124, 232,.4)',
            },
          },
          // areaStyle: {
          //   color: colorsA[0],
          // },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          label: {
            show: false,
            position: 'top',
            formatter: (par) => {
              return par.value;
            },
            textStyle: { fontSize: 11, color: '#FFF' },
          },
          markPoint: {
            symbol: 'arrow', //定位图标样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#FFF',
              formatter: (par) => {
                return par.value + '个';
              },
            },
          },
        },
      ];
      options.series = series;
      this.options = options;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-item {
  width: 297px;
  height: 292px;
  background: url('../../../assets/img/launch/internet/homeTopbox.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
  // margin-bottom: 25px;

  .box-title {
    position: relative;
    height: 55px;
    line-height: 55px;
    text-indent: 1em;
    font-size: 18px;
    font-weight: 600;

    &::after {
      position: absolute;
      top: -2px;
      content: url('../../../assets/img/launch/pack/pack_nav.png');
    }
  }

  .box-body {
    .box {
      // position: absolute;
      // top: 6px;
      // left: 0px;
      width: 100%;
      height: 70px;
      z-index: 0;
      // border: 1px solid red;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .box-info {
        // border: 1px solid red;
        // margin: 8px auto;
        width: 66px;

        // line-height: 38px;
        text-align: center;
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        padding: 10px 10px 45px 10px;

        background: url('../../../assets/img/launch/home/rcc_bg.png') no-repeat center;
        background-position: center 14px;
        background-size: 66px 71px;

        // 呼吸光效
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle,
              rgba(255, 255, 255, 0.1),
              transparent);
          animation: breathe 3s ease-in-out infinite;
        }

        // 缩放效果
        animation: bgScale 4s ease-in-out infinite;

        .light {
          // margin-top: -10px;
          position: absolute;
          top: 10px;
          left: 25px;
          margin-bottom: 12px;
          // padding-left: 10px;
          color: #ffb507;
          font-size: 20px;
          font-weight: 600;
          // font-family: 'YouSheBiaoTiHei';
        }

        .info-text {
          position: absolute;
          top: 35px;
          left: 16px;
        }
      }
    }

    .body-bottom {
      width: calc(100% - 15px);
      margin-left: 15px;

      .box-bottom-title {
        position: relative;
        margin-top: 8px;
        margin-bottom: 8px;
        height: 14px;
        line-height: 14px;
        width: calc(100% - 30px);
        padding-left: 22px;
        font-size: 10px;
        // background: linear-gradient(90deg, rgba(21, 77, 160, 0.2) 0%, rgba(21, 77, 160, 0) 100%), linear-gradient(270deg, rgba(21, 77, 160, 0) 0%, rgba(21, 132, 185, 0.44) 100%);
        background: url('../../../assets/img/launch/pack/header.png') no-repeat center;
        background-position: left center;
        background-size: contain;
      }
    }
  }
}

@keyframes breathe {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes bgScale {

  0%,
  100% {
    background-size: 80% 90%;
    filter: brightness(0.9);
  }

  50% {
    background-size: 80% 90%;
    filter: brightness(1.1);
  }
}
</style>